<template>
	<view>
		<navbar ref="navbar" :config="config" backColor="#000"></navbar>
		<view class="career-box">
			<view class="career-user" :style="'background-image: url('+imgUrl+'/career/myCareer.png' + ')'">
				<view class="user-head">
					<image class="user-head-img" v-if="userInformation.head_photo" :src="userInformation.head_photo"
						mode="aspectFill"></image>
					<image class="user-head-img" v-else :src="imgUrl+'/head-on.png'" mode="aspectFill"></image>
					<!-- <view class="user-name" v-if="isLogin"> -->
					<view class="titleView">

						<view class="user-name-title" v-if="isLogin">
							<view class="title">{{userInformation.real_name}}</view>
						</view>

						<view class="gradeView" v-if="isLogin" style="width: auto;">
							<view class="gradeView-title">{{ userInformation.grade == 1 ? '店长' : '普通会员' }}</view>

							<image class="starImage"
								v-if="orderEquity.userPayConsumption>=10000 && orderEquity.userPayConsumption<50000"
								:src="imgUrl+'/career/cityStar.png'" mode=""></image>
							<image class="starImage" v-if="orderEquity.userPayConsumption>=50000"
								:src="imgUrl+'/career/cityStar.png'" mode=""></image>
							<image class="starImage" v-if="orderEquity.userPayConsumption>=50000"
								:src="imgUrl+'/career/cityStar.png'" mode=""></image>


							<image class="starImage" v-if="orderEquity.userPayConsumption>=30000"
								:src="imgUrl+'/collection/infoCircle.png'" mode=""></image>
						</view>
						<!-- </view> -->
					</view>
					<view class="user-name" v-if="!isLogin">登陆/注册<text style="margin-left: 5px;"
							class="iconfont right">&#xe6c7;</text>
					</view>
				</view>
				<view class="user-info">

					<view class="user-tag">
						<view>加入时间</view>
						<view>{{userInformation.register_time?userInformation.register_time.substr(0,11):''}}</view>
					</view>
					<image :src="imgUrl+'/career/xuxianLine.png'" class="xuxianLine" style="height:27rpx;width:4rpx;">
					</image>
					<view class="user-tag">
						<view>推荐人</view>
						<view>{{ userInformation.invited  || '平台'}}</view>
					</view>
					<image :src="imgUrl+'/career/xuxianLine.png'" class="xuxianLine" style="height:27rpx;width:4rpx;">
					</image>
					<view class="user-tag">
						<view>状态</view>
						<view>{{ userInformation.activating ? '激活' : '未激活'}}</view>
					</view>
				</view>
			</view>
			<view class="stateBox">
				<view class="stateBox_list">
					<view class="line">
						<view class="stateBox_val">我的消费值</view>
						<view class="stateBox_lab">{{orderEquity.userPayConsumption||0}}</view>
					</view>
					<image :src="imgUrl+'/career/xuxianLine.png'" class="xuxianLine" style="height:38rpx;width:4rpx;">
					</image>
					<view class="line">
						<view class="stateBox_val">平台权益值</view>
						<view class="stateBox_lab">{{orderEquity.platformMonthEquity||0}}</view>
					</view>
				</view>
			</view>

			<view class="xinAddView">
				<view class="infoView">
					<image :src="imgUrl+'/collection/infoCircle.png'" style="width:27rpx;height:27rpx"></image>
					<view class="stateBox_txt">惠选区消费得到消费值达到1万1颗星,达到5万2颗星</view>
				</view>

				<view class="user-integral" @click.stop="lookConsume()">
					<view class="user-integral-left">
						<text class="user-integral-hint">我的贡献值（贡献值可变积分）</text>
						<text
							class="user-integral-nums">{{ $addDecimals(userInformation.commission_able , 2) | integer }}.
							<text>{{ $addDecimals(userInformation.commission_able , 2) | decimals }}</text> </text>
					</view>
					<image :src="imgUrl+'/career/right.png'" class="careerImage"></image>
				</view>


				<view class="popularize-info" v-if="userInformation.grade === 0">

					<view class="grand-total">

						<view class="grand-total-top">
							累计推广人员
							<span class="grand-total-top-red">{{ getGradeValue.childActivatingCount}}
							</span>人，
							<!-- </view>
						<view class="grand-total-bottom"> -->
							<!-- v-if="getGradeValue.activatingCount >= 0" -->
							<span>升级还需要推广
								<span class="grand-total-top-red">
									{{ getGradeValue.activatingCount }}
								</span>人，
							</span>
							<span>升级还需要推广
								<span class="grand-total-top-red">
									{{getGradeValue.activatingCount}}
								</span>个直推用户，
							</span>

							<span v-if="getGradeValue.storeManager - getGradeValue.totalPrice >= 0">
								还需要在惠选区再消费
								<span class="grand-total-top-red">
									{{getGradeValue.storeManager - getGradeValue.totalPrice}}
								</span>元
							</span>

						</view>
					</view>
				</view>
				<view class="sliderViewXin">

					<!-- <view class="sliderViewXinContent">
					<view class="sliderViewXinContentView">累计推广人员<span>0</span>人</view>
					<view class="sliderViewXinContentView" style="margin-top:8rpx;padding-top:0">
						升级还需要推广<span>0</span>人，还需要在惠选区再消费</view>
				</view> -->


					<u-slider v-model="getGradeValue.childActivatingCount" disabled height="8" block-color="#FF211F"
						inactive-color="#F5F5F5" active-color="#FF466D" block-width="16" class="sliderLine"
						:use-slot="true" :max="getGradeValue.totalPeople">
						<view class="">
							<image :src="imgUrl+'/career/whiteSan.png'" class="whiteSan"></image>
						</view>

					</u-slider>
					<view class="sliderView">
						<view class="redView">普通会员</view>
						<view style="color:#999999">店长</view>
					</view>
				</view>
				<!-- <view class="progress-box">
				<view class="progress-line"
					:style="{'width':progressWidth(updatestatisticsData.existing_count , updatestatisticsData.without_count)}">
					<view class="progress-icon">
						<image class="progress-img"
							src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/career/career4.png"
							mode=""></image>
					</view>
				</view>
			</view> -->
			</view>
			<view class="xinAddViewTwo">

				<view class="infoView">
					<image :src="imgUrl+'/collection/infoCircle.png'" style="width:27rpx;height:27rpx"></image>
					<view class="stateBox_txt">累计三万以上将成为“云掌柜”</view>
				</view>
				<view class="cumulativeConsumption">
					当前累计消费
					<view class="cumulativeConsumptionNumber" v-if="isNaN(getGradeValue.totalPrice)">

						<!-- {{getGradeValue.totalPrice}} -->
						0

					</view>
					<view class="cumulativeConsumptionNumber" v-else>

						{{getGradeValue.totalPrice}}

					</view>


					元
				</view>
				<!-- <view class="sliderView"> -->
				<view class='sliderViewBottom'>

					<u-slider v-model="getGradeValue.totalPrice" disabled :use-slot="true"
						active-color="linear-gradient(90deg, #764617 0%, #3B2F03 100%)"
						:max="getGradeValue.cloudShopkeeper" inactive-color="#F5F5F5">
						<!-- 这里外面需要多一层view，否则".badge-button"样式可能不生效 -->
						<view class="">

							<view class="badge-button"
								:style="'background-image: url('+imgUrl+'/career/cloudShopkeeper.png' + ')'">
								<!-- {{value}} -->
							</view>
						</view>
					</u-slider>
					<!-- </view> -->
				</view>
			</view>


			<view class="inviteNow" @click="goSublevelPage('/pages/user/invitationCode/invitationCode')">
				<image :src="imgUrl+'/career/buttonOne.png'" class="buttonOne"></image>
				<view class="inviteNowTitle">立即邀请</view>
				<image :src="imgUrl+'/career/buttonTwo.png'" class="buttonOne"></image>
			</view>
			<!-- 	<view class="popularize-hint">
				累计推广人员满{{ updatestatisticsData.count }}人，直推人员满{{ updatestatisticsData.num_direct_referrals }}人，累计在惠选区消费满{{updatestatisticsData.consumerStandards}}且被推广的人员已激活，可自动升级为店长，尊享团队贡献值，享受更多收益
			</view> -->
			<view @click="activationOfCode" class="activationCode">
				使用激活码激活
			</view>


			<view class="other-top">其他工具</view>
			<view class="option">
				<view class="list" @click.stop="goSublevelPage('/pages/user/distribution/moneyList')">
					<image :src="imgUrl+'/career/one.png'" class="my-icon"></image>
					<view class="name-one">推广订单</view>
				</view>
				<view class="list" @click="goNewPull()">
					<image :src="imgUrl+'/career/two.png'" class="my-icon"></image>
					<view class="name-one">我的团队</view>
				</view>
				<view class="list" @click="goSublevelPage('/pages/user/invitationCode/invitationCode')">
					<image :src="imgUrl+'/career/three.png'" class="my-icon"></image>
					<view class="name-one">会员码</view>
				</view>
			</view>
		</view>
		<!-- <entrepreneurship-zone-tabbar :current="1"></entrepreneurship-zone-tabbar> -->
		<!-- 身份验证弹框 -->
		<u-popup v-model="showPopup" @close="closePopup" :round="10" mode="bottom" :closeOnClickOverlay="false">
			<view style="padding: 40rpx;">
				<u-form class="form-box" :model="form" ref="uForm" label-width="156">
					<u-form-item class="usable-input" label="激活码">
						<u-input v-model="form.code" placeholder="请输入激活码" />
					</u-form-item>
				</u-form>
				<view class="rightP u-flex-center u-mt40" @click="activation">
					<view class="u-btn u-ml30 u-font36" style="width: 90%;margin: 0 auto;background-color: #FF211F;"
					>兑换激活</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		updatestatistics,
		operatingInfo,
		orderEquity
	} from "@/api/personal-center.js"
	import math from "@/common/math.js"
	import UniTest from "../../components/uni-test/uni-test";
	export default {
		components: {
			UniTest
		},
		data() {
			return {

				getGradeValue: '',
				sliderValue: 10,
				imgUrl: this.$mConfig.staticUrl,
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '事业',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#F9F9F9"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000",
				},
				defaultHeadPhoto: false,
				userInformation: {},
				updatestatisticsData: {
					count: 20,
					existing_count: 0,
					without_count: 20,
					without_consumerStandards: 0,
					existing_consumerStandards: 0,
					consumerStandards: 0,
				},
				isLogin: false,
				orderEquity: {},
				showPopup: false,
				userId: '',
				form: {
					code: ''
				},
			};
		},
		onShow() {
			this.judgeLogin();
			this.getOrderEquity()
			this.getGrade()
		},
		onPullDownRefresh() {
			this.judgeLogin();
			this.getOrderEquity()
		},
		onLoad(options) {
			console.log("options", options)
			this.userId = options.userId
		},
		computed: {
			progressWidth() {
				return function(num_1 = 0, num_2 = 1) {
					try {
						const num = num_1 / num_2 * 100
						if (num <= 0) {
							return '1px'
						} else if (num > 95 && num < 100) {
							return '95%'
						} else if (num >= 100) {
							return '100%'
						} else {
							return `${num}%`
						}
					} catch (err) {
						return '1px'
					}
				}
			}
		},
		methods: {
			// 激活码兑换弹框
			activation() {
				if (!this.form.code) {
					this.$mUtil.toast('请填写激活码')
					return false
				}
				console.log("code", this.form.code)
				this.$http.post('/account/activation', this.form.code).then(res => {
					if (res && res.code == 200) {
						this.$mUtil.toast('激活成功')
						this.showPopup = false
					}

				})
			},
			closePopup() {
				this.showPopup = false;
			},
			activationOfCode() {
				this.showPopup = true;
			},
			getUpdatestatistics() {
				this.$http.get(updatestatistics).then(res => {
					if (res && res.code == 200) {
						this.updatestatisticsData = res.data;
					}
				})
			},
			//获取我的消费值  平台权益值
			getOrderEquity() {
				this.$http.get(orderEquity).then(res => {
					if (res && res.code == 200) {
						this.orderEquity = res.data
					}
				})
			},
			getGrade() {
				// 获取数据
				console.log("123", this.userId)
				this.$http.get('/order/getGrade', {
					userId: this.userId
				}).then(res => {
					this.getGradeValue = res.data
					console.log("this.getGradeValue", this.getGradeValue)
				})
			},
			// lookHeadPhoto(){
			// }
			judgeLogin() {
				this.$http.get(operatingInfo).then(res => {
					uni.stopPullDownRefresh();
					if (res && res.code == 200) {
						this.isLogin = true
						this.userInformation = res.data;
						if (res.data.grade === 0) {
							this.getUpdatestatistics()
						}
					} else {
						this.isLogin = false
					}
				})

			},
			lookConsume() {
				uni.navigateTo({
					url: '/pages/user/consume-val'
				})
			},
			// 跳转 推广拉新
			goNewPull() {
				let obj = {
					real_name: this.userInformation.real_name,
					service_system_province: this.userInformation.service_system_province,
					head_photo: this.userInformation.head_photo
				}
				uni.navigateTo({
					url: "/pages/operationCenter/newPull?userInfo=" + JSON.stringify(obj)
				})
			},
			// 跳转子级页面
			goSublevelPage(page) {
				uni.navigateTo({
					url: page
				})
				// if(this.isLogin){
				// 	uni.navigateTo({
				// 		url: page
				// 	})
				// }else{
				// 	this.$mUtil.toast("请先登录")
				// }
			},
		}
	}
</script>
<style lang="scss" scoped>
	.career-box {
		width: 688rpx;
		// margin-left: 38rpx;
		// margin-right: 38rpx;
		margin: 0 auto;
		box-sizing: border-box;

		.career-user {
			width: 100%;
			background-color: #ffffff;
			// padding: 35rpx 30rpx;
			border-radius: 20rpx;
			box-shadow: 0 0 40rpx rgb(250, 250, 250);
			background-size: 100% 100%;

			.user-head {
				display: flex;
				align-items: center;
				border-radius: 20rpx 20rpx 0 0;
				padding: 25rpx 0;
				padding-bottom: 0;

				.user-head-img {
					width: 85rpx;
					height: 85rpx;
					border-radius: 50%;
				}

				.user-name {
					font-size: 44rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					// font-weight: 700;
					color: #474747;
					padding-left: 30rpx;

					.star {
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
					}
				}

			}

			.user-info {
				height: 96rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				background-color: #fff;
				border-radius: 20rpx;
				margin-top: 38rpx;
				width: 688rpx;

				.user-tag {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					width: 229rpx;
					height: 96rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					padding: 19rpx 0;
					box-sizing: border-box;
				}

				.user-tag view:nth-child(1) {
					font-weight: 400;
					font-size: 21rpx;
					color: #999999;
					line-height: 23rpx;
				}

				.user-tag view:nth-child(2) {
					font-weight: 500;
					font-size: 23rpx;
					color: #333333;
					line-height: 23rpx;
					margin-top: 11rpx;
				}
			}
		}


		.user-integral {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			font-weight: 400;
			position: relative;
			height: 162rpx;
			background: linear-gradient(135deg, #FF466D 0%, #FF211F 100%);
			border-radius: 19rpx 19rpx 19rpx 19rpx;
			padding: 38rpx;
			box-sizing: border-box;
			width: 650rpx;
			margin-left: 19rpx;

			.user-integral-nums {
				font-size: 40rpx;

				// color: #ffffff;
				text {
					font-size: 40rpx;
				}
			}

			.user-integral-hint {
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.9);
				margin-bottom: 19rpx;
			}

			.user-integral-more {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 37rpx;
			}

			// <view class="user-integral">
			// 	<text class="user-integral-nums">99999999.00</text>
			// 	<text class="user-integral-hint">我的贡献值（贡献值可变积分）</text>
			// 	<!-- <text class="iconfont">&#xe6c7;</text> -->
			// </view>
		}

		.stateBox {
			background: #ffffff;
			margin-top: 19rpx;
			height: 150rpx;
			border-radius: 20rpx;
			width: 688rpx;

			.stateBox_title {
				font-size: 32rpx;
				font-weight: bold;
				color: #474747;
			}

			.stateBox_list {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				// margin: 20rpx 0 10rpx;

				.line {
					width: 344rpx;
					height: 150rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					padding-top: 38rpx;
					padding-left: 38rpx;
				}

				>view {
					width: 50%;
					// padding-left: 30rpx;

					&:first-child {
						position: relative;

					}
				}

				.stateBox_lab {
					font-weight: bold;
					font-size: 42rpx;
					color: #FF211F;
					line-height: 42rpx;
				}

				.stateBox_val {
					font-weight: 400;
					font-size: 23rpx;
					color: #333333;
					line-height: 23rpx;
					margin-bottom: 8rpx;
				}
			}
		}

		.popularize-info {
			height: 108rpx;
			background: #FFF5F5;
			border-radius: 19rpx 19rpx 19rpx 19rpx;
			margin-top: 31rpx;
			margin-bottom: 40rpx;
			width: 650rpx;
			margin-left: 19rpx;

			.grand-total {
				padding: 19rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				.grand-total-top {
					font-weight: 400;
					font-size: 21rpx;
					color: rgba(153, 153, 153, 0.9);
					line-height: 31rpx;
					margin-bottom: 8rpx;
				}

				.grand-total-bottom {
					font-weight: 400;
					font-size: 21rpx;
					color: rgba(153, 153, 153, 0.9);
					line-height: 31rpx;
				}
			}

			.progress-box {
				width: 100%;
				height: 28rpx;
				background: #ffffff;
				border-radius: 14rpx;
				margin-top: 24rpx;

				.progress-line {
					height: 100%;
					border-radius: 14rpx;
					background-color: #FF721B;
					position: relative;

					.progress-icon {
						position: absolute;
						right: 0;
						top: 50%;
						width: 41rpx;
						height: 41rpx;
						background-color: #febdf7;
						border-radius: 50%;
						transform: translate(50%, -50%);

						.progress-img {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}
			}

			.popularize-hint {
				width: 100%;
				margin-top: 30rpx;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #AAAAAA;
			}
		}

		.option {
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			align-items: center;
			width: 688rpx;
			height: 89rpx;
			margin-top: 38rpx;

			.list {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 227rpx;
				height: 88rpx;
				border-radius: 19rpx 19rpx 19rpx 19rpx;

				.name-one {
					padding-top: 11rpx;
					font-weight: 400;
					font-size: 23rpx;
					color: #333333;
					line-height: 27rpx;
				}
			}
		}
	}

	.user-name-title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.title {
			font-weight: bold;
			font-size: 35rpx;
			color: #333333;
			line-height: 38rpx;
		}
	}

	.gradeView {
		font-weight: 400;
		font-size: 19rpx;
		color: #804E11;
		line-height: 23rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 8rpx;
		padding: 0 15rpx;
		height: 38rpx;
		background: linear-gradient(90deg, #FFE7AD 0%, #FCE0B7 100%);
		border-radius: 38rpx 38rpx 38rpx 38rpx;
	}

	.starImage {
		width: 27rpx;
		height: 27rpx;
		margin-left: 4rpx;
	}

	.infoView {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin: 19rpx 0;
		margin-left: 19rpx;
	}

	.stateBox_txt {
		font-weight: 400;
		font-size: 21rpx;
		color: rgba(153, 153, 153, 0.9);
		line-height: 31rpx;
		margin-left: 8rpx;
	}

	.xuxianLine {}

	.user-integral-left {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.careerImage {
		width: 12rpx;
		height: 24rpx;
	}

	.grand-total-top-red {
		font-weight: 600;
		font-size: 21rpx;
		color: #FF211F;
		line-height: 31rpx;
		margin: 0 2rpx;
	}

	.sliderView {
		width: 650rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 19rpx;
		padding-left: 15rpx;
		padding-bottom: 19rpx;
	}

	.jibieView view:nth-child(1) {
		font-weight: 600;
		font-size: 25rpx;
		color: #FF211F;
		line-height: 31rpx;
	}

	.jibieView view:nth-child(2) {
		font-weight: 400;
		font-size: 25rpx;
		color: #999999;
		line-height: 31rpx;
	}

	.inviteNow {
		width: 673rpx;
		height: 88rpx;
		margin: 0 auto;
		background: #FF211F;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		font-weight: 400;
		font-size: 29rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 56rpx;
	}

	.buttonOne {
		width: 35rpx;
		height: 19rpx;
	}

	.inviteNowTitle {
		margin: 0 19rpx;
	}

	.sliderLine {
		width: 650rpx !important;
	}

	.activationCode {
		width: 673rpx;
		height: 88rpx;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		border: 2rpx solid #FF211F;
		font-weight: 400;
		font-size: 29rpx;
		color: #FF211F;
		line-height: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		margin-top: 38rpx;
	}

	.other-top {
		font-weight: 600;
		font-size: 31rpx;
		color: #333333;
		line-height: 31rpx;
		margin-top: 38rpx;
	}

	.my-icon {
		width: 45rpx;
		height: 45rpx;
	}

	.cumulativeConsumption {
		height: 69rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 19rpx;
		color: #999;
		width: 650rpx;
		height: 69rpx;
		background: #F5F5F5;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin-left: 19rpx;

	}


	.cumulativeConsumptionNumber {
		font-weight: 600;
		font-size: 21rpx;
		line-height: 31rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;

		/* 设置文本的颜色为白色，以便于背景渐变的颜色遮罩 */
		color: white;
		/* 设置文本的背景为线性渐变 */
		background: linear-gradient(45deg, #764617, #3B2F03);
		/* 使用 blend-mode 实现文本颜色与背景渐变颜色的混合 */
		-webkit-background-clip: text;
		background-clip: text;
		/* 使用 color 作为遮罩，实际看到的是背景渐变 */
		-webkit-text-fill-color: transparent;
		text-fill-color: transparent;
		/* 防止文本阴影遮挡背景渐变 */
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		margin: 0 2rpx;
	}

	.redView {
		font-weight: 600;
		font-size: 25rpx;
		color: #FF211F;
		line-height: 31rpx;
	}

	.badge-button {
		padding: 4rpx 6rpx;
		// background-color: $u-type-error;
		color: #fff;
		border-radius: 10rpx;
		font-size: 22rpx;
		line-height: 1;

		width: 100rpx;
		height: 43rpx;
		background-size: 100% 100%;
	}

	.sliderViewBottom {
		/deep/.u-slider__gap {
			background: linear-gradient(90deg, #764617 0%, #3B2F03 100%);
			border-radius: 173rpx 173rpx 173rpx 173rpx;
			margin-top: 54rpx;
		}

		padding-bottom: 19rpx;
		padding-left: 19rpx;
		padding-right: 19rpx;
		height: 42rpx;

	}

	.sliderViewXin {
		margin-top: 31rpx;
		margin-left: 19rpx;

		/deep/.u-slider__gap {
			border-radius: 173rpx 173rpx 173rpx 173rpx;
		}
	}

	.whiteSan {
		width: 33rpx;
		height: 25rpx;
		position: relative;
		top: -12px;
	}

	.gradeView-title {
		font-weight: 400;
		font-size: 19rpx;
		color: #804E11;
		line-height: 23rpx;
		margin-right: 4rpx;
		width: auto;
		height: 38rpx;
		line-height: 38rpx;
	}

	.sliderViewXinContent {
		width: 688rpx;
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin-bottom: 32rpx;
	}

	.sliderViewXinContentView {
		font-weight: 400;
		font-size: 21rpx;
		color: rgba(153, 153, 153, 0.9);
		line-height: 31rpx;
		padding: 19rpx;
		padding-bottom: 0;
		box-sizing: border-box;
	}

	.sliderViewXinContentView span {
		font-weight: 600;
		font-size: 21rpx;
		color: #FF211F;
		line-height: 31rpx;
		margin: 0 2rpx;
	}

	.template {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.titleView {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		height: 66rpx;
		margin-left: 19rpx;
	}

	.xinAddView {
		width: 688rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		border: 2rpx solid #FF211F;
		margin-top: 31rpx;
	}

	.xinAddViewTwo {
		width: 688rpx;
		height: auto;
		margin-top: 31rpx;
		width: 688rpx;
		height: auto;
		background: #FFFFFF;
		border: 2rpx solid #764617;
		border-radius: 19rpx 19rpx 19rpx 19rpx !important;
	}
	/deep/.u-slider__button-wrap{
		left:50%
	}
</style>